<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span style="color: #409eff">
          <el-icon><MagicStick /></el-icon>
          题目列表
        </span>
      </div>
    </template>
    <el-table :data="tableData" stripe style="width: 100%" table-layout="fixed">
      <el-table-column prop="id" label="题目ID" />
      <el-table-column prop="title" label="标题" />
      <el-table-column label="难度">
        <template #default>
          <el-button size="small" type="success"> 简单 </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总数" />
      <el-table-column prop="passRate" label="AC通过率">
        <template #default>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
const tableData = [
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  },
  {
    id: 'P1100',
    title: 'KKT函数506角谷猜想',
    difficulty: '一个月前',
    total: 996,
    passRate: 45
  }
]
</script>
